<template>
  <div class="sales-dashboard">
    <div class="dashboard-header">
      <h3 class="dashboard-title">销售概览</h3>
      <div class="time-filter">
        <button 
          v-for="period in timePeriods" 
          :key="period.value"
          class="filter-btn"
          :class="{ active: activePeriod === period.value }"
          @click="activePeriod = period.value"
        >
          {{ period.label }}
        </button>
      </div>
    </div>

    <div class="dashboard-content">
      <!-- 上半部分：关键数据 -->
      <div class="key-metrics">
        <div class="metric-item" v-for="(metric, index) in keyMetrics" :key="index">
          <div class="metric-icon" :style="{ background: metric.color }">
            <component :is="metric.icon" class="metric-svg-icon" />
          </div>
          <div class="metric-content">
            <div class="metric-label">{{ metric.label }}</div>
            <div class="metric-value">
              <AnimatedCounter 
                :value="metric.value" 
                :decimals="metric.decimals"
                :suffix="metric.suffix"
              />
            </div>
            <div class="metric-change" :class="metric.trend">
              {{ metric.trend === 'up' ? '↗' : '↘' }} {{ metric.change }}
            </div>
          </div>
        </div>
      </div>

      <!-- 下半部分：趋势图表 -->
      <div class="trend-chart">
        <div ref="chartRef" class="chart-container"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
import * as echarts from 'echarts'
import AnimatedCounter from './AnimatedCounter.vue'
import { hourlyTrend } from '../mock/dashboardData.js'
import { Money, DataLine, ShoppingCart, StarFilled } from '@element-plus/icons-vue'

const chartRef = ref(null)
const activePeriod = ref('today')
let chart = null

const timePeriods = [
  { label: '今日', value: 'today' },
  { label: '本周', value: 'week' },
  { label: '本月', value: 'month' }
]

// 三组周期数据
const salesDataMap = {
  today: {
    xAxis: Array.from({ length: 24 }, (_, i) => `${i}:00`),
    sales: Array.from({ length: 24 }, () => Math.round(Math.random() * 2000 + 500)),
    orders: Array.from({ length: 24 }, () => Math.round(Math.random() * 200 + 50))
  },
  week: {
    xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    sales: Array.from({ length: 7 }, () => Math.round(Math.random() * 20000 + 10000)),
    orders: Array.from({ length: 7 }, () => Math.round(Math.random() * 2000 + 500))
  },
  month: {
    xAxis: Array.from({ length: 30 }, (_, i) => `${i + 1}日`),
    sales: Array.from({ length: 30 }, () => Math.round(Math.random() * 20000 + 10000)),
    orders: Array.from({ length: 30 }, () => Math.round(Math.random() * 2000 + 500))
  }
}

// 三组关键指标数据
const keyMetricsMap = {
  today: [
    { label: '总销售额', value: 2580000, decimals: 0, suffix: '元', change: '+2.5%', trend: 'up', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', icon: Money },
    { label: '订单转化率', value: 3.67, decimals: 2, suffix: '%', change: '+0.03%', trend: 'up', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', icon: DataLine },
    { label: '平均订单价值', value: 164.5, decimals: 1, suffix: '元', change: '-0.1%', trend: 'down', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', icon: ShoppingCart },
    { label: '客户满意度', value: 96.8, decimals: 1, suffix: '%', change: '+0.2%', trend: 'up', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', icon: StarFilled }
  ],
  week: [
    { label: '总销售额', value: 18500000, decimals: 0, suffix: '元', change: '+8.1%', trend: 'up', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', icon: Money },
    { label: '订单转化率', value: 3.52, decimals: 2, suffix: '%', change: '+0.12%', trend: 'up', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', icon: DataLine },
    { label: '平均订单价值', value: 158.2, decimals: 1, suffix: '元', change: '-1.3%', trend: 'down', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', icon: ShoppingCart },
    { label: '客户满意度', value: 96.2, decimals: 1, suffix: '%', change: '+0.8%', trend: 'up', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', icon: StarFilled }
  ],
  month: [
    { label: '总销售额', value: 82000000, decimals: 0, suffix: '元', change: '+15.6%', trend: 'up', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)', icon: Money },
    { label: '订单转化率', value: 3.44, decimals: 2, suffix: '%', change: '+0.21%', trend: 'up', color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)', icon: DataLine },
    { label: '平均订单价值', value: 162.7, decimals: 1, suffix: '元', change: '-0.7%', trend: 'down', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)', icon: ShoppingCart },
    { label: '客户满意度', value: 97.1, decimals: 1, suffix: '%', change: '+1.1%', trend: 'up', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)', icon: StarFilled }
  ]
}

const keyMetrics = computed(() => keyMetricsMap[activePeriod.value])

onMounted(() => {
  initChart()
})

onUnmounted(() => {
  if (chart) {
    chart.dispose()
  }
})

watch(activePeriod, () => {
  updateChart()
})

const initChart = () => {
  chart = echarts.init(chartRef.value)
  updateChart()
  
  window.addEventListener('resize', () => {
    chart?.resize()
  })
}

const updateChart = () => {
  if (!chart) return
  const { xAxis, sales, orders } = salesDataMap[activePeriod.value];

  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(15, 52, 96, 0.95)',
      borderColor: '#00f0ff',
      borderWidth: 1,
      textStyle: { color: '#ffffff' },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#00f0ff'
        }
      }
    },
    legend: {
      data: ['销售额', '订单量'],
      textStyle: { color: '#ffffff' },
      top: '5%'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      top: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: xAxis,
        axisPointer: { type: 'shadow' },
        axisLine: { lineStyle: { color: '#00f0ff' } },
        axisLabel: { 
          color: '#7ee9ff',
          interval: xAxis.length > 15 ? 2 : 0
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '销售额',
        position: 'left',
        axisLine: { lineStyle: { color: '#00f0ff' } },
        axisLabel: { 
          color: '#7ee9ff',
          formatter: '¥{value}'
        },
        splitLine: { lineStyle: { color: 'rgba(0, 240, 255, 0.1)' } }
      },
      {
        type: 'value',
        name: '订单量',
        position: 'right',
        axisLine: { lineStyle: { color: '#00ff9d' } },
        axisLabel: { 
          color: '#7ee9ff',
          formatter: '{value}单'
        },
        splitLine: { show: false }
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: sales,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: '#00f0ff' },
              { offset: 0.5, color: '#0099cc' },
              { offset: 1, color: 'rgba(0, 240, 255, 0.1)' }
            ]
          }
        },
        emphasis: {
          itemStyle: {
            color: '#00f0ff'
          }
        }
      },
      {
        name: '订单量',
        type: 'line',
        yAxisIndex: 1,
        data: orders,
        lineStyle: {
          color: '#00ff9d',
          width: 3
        },
        itemStyle: {
          color: '#00ff9d'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(0, 255, 157, 0.3)' },
              { offset: 1, color: 'rgba(0, 255, 157, 0)' }
            ]
          }
        },
        smooth: true
      }
    ]
  }
  chart.setOption(option, true)
}
</script>

<style scoped>
.sales-dashboard {
  background: rgba(15, 52, 96, 0.3);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(0, 240, 255, 0.2);
  backdrop-filter: blur(10px);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dashboard-title {
  color: #00f0ff;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.time-filter {
  display: flex;
  gap: 8px;
}

.filter-btn {
  background: rgba(0, 240, 255, 0.1);
  border: 1px solid rgba(0, 240, 255, 0.3);
  color: #7ee9ff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
}

.filter-btn:hover {
  background: rgba(0, 240, 255, 0.2);
  transform: translateY(-1px);
}

.filter-btn.active {
  background: rgba(0, 240, 255, 0.3);
  border-color: #00f0ff;
  color: #00f0ff;
}

.dashboard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.key-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(0, 240, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 240, 255, 0.1);
  transition: all 0.3s ease;
}

.metric-item:hover {
  background: rgba(0, 240, 255, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 240, 255, 0.2);
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.metric-content {
  flex: 1;
}

.metric-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  margin-bottom: 4px;
}

.metric-value {
  color: #00f0ff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 2px;
}

.metric-change {
  font-size: 10px;
  font-weight: 500;
}

.metric-change.up {
  color: #00ff9d;
}

.metric-change.down {
  color: #ff4757;
}

.trend-chart {
  flex: 1;
  min-height: 200px;
}

.chart-container {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .key-metrics {
    grid-template-columns: 1fr;
  }
  
  .dashboard-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

.metric-svg-icon {
  font-size: 28px;
  width: 28px;
  height: 28px;
  display: block;
}
</style> 